<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/banner.css">
    <link rel="stylesheet" href="./font_94ublvqe22a/iconfont.css">
</head>

<body>
    <div class="page">
        <div class="main">

            <div class="head">
                <div class="logo"><a href=""><img src="../imgs/logo2.png" alt=""></a></div>
                <div class="input">
                    <span>宝贝</span>
                    <input type="text"class="txt">
                    <span class="button"><a href="http://localhost:3000/list.html">搜索</a></span><br>
                    <ul class="searchlist"></ul>
                </div>

                <div class="erweima"><img src="../imgs/erweima.png" alt=""></div>
            </div>

            <div class="nav">
                <div class="left">
                    <div class="kinds">
                        <div class="kindhead">分类</div>
                        <ul class="iconfont icon-nvzhuang">
                            <li><a href="http://localhost:3000/list.html">女装</a></li> /
                            <li><a href="http://localhost:3000/list.html">内衣</a></li> /
                            <li><a href="http://localhost:3000/list.html">奢品</a></li>
                        </ul>
                        <ul class="iconfont icon-nvxie">
                            <li><a href="http://localhost:3000/list.html">女鞋</a></li> /
                            <li><a href="http://localhost:3000/list.html">男鞋</a></li> /
                            <li><a href="http://localhost:3000/list.html">箱包</a></li>
                        </ul>
                        <ul class="iconfont icon-meizhuangleimu">
                            <li><a href="http://localhost:3000/list.html">美妆</a></li> /
                            <li><a href="http://localhost:3000/list.html">饰品</a></li> /
                            <li><a href="http://localhost:3000/list.html">洗护</a></li>
                        </ul>
                        <ul class="iconfont icon-nanzhuang">
                            <li><a href="http://localhost:3000/list.html">男装</a></li> /
                            <li><a href="http://localhost:3000/list.html">运动</a></li> /
                            <li><a href="http://localhost:3000/list.html">百货</a></li>
                        </ul>
                        <ul class="iconfont icon-shouji">
                            <li><a href="http://localhost:3000/list.html">手机</a></li> /
                            <li><a href="http://localhost:3000/list.html">数码</a></li> /
                            <li><a href="http://localhost:3000/list.html">企业礼品</a></li>
                        </ul>
                        <ul class="iconfont icon-jiaju">
                            <li><a href="http://localhost:3000/list.html">家装</a></li> /
                            <li><a href="http://localhost:3000/list.html">电器</a></li> /
                            <li><a href="http://localhost:3000/list.html">车品</a></li>
                        </ul>
                        <ul class="iconfont icon-shipin-shuiguo-yingtao">
                            <li><a href="">食品</a></li> /
                            <li><a href="">生鲜</a></li> /
                            <li><a href="">母婴</a></li>
                        </ul>
                        <ul class="iconfont icon-yiyaoyuyiliao">
                            <li><a href="">医药</a></li> /
                            <li><a href="">保健</a></li> /
                            <li><a href="">进口</a></li>
                        </ul>
                    </div>
                </div>
                <div class="right">
                    <div class="up">
                        <ul>
                            <li><a href="http://localhost:3000/list.html">天猫</a></li><span class="iconfont icon-shuxian"></span>
                            <li><a href="http://localhost:3000/list.html">聚划算</a></li><span class="iconfont icon-shuxian"></span>
                            <li><a href="http://localhost:3000/list.html">天猫超市</a></li><span class="iconfont icon-shuxian"></span>
                            <li><a href="http://localhost:3000/list.html">司法拍卖</a></li><span class="iconfont icon-shuxian"></span>
                            <li><a href="http://localhost:3000/list.html">飞猪旅行</a></li><span class="iconfont icon-shuxian"></span>
                            <li><a href="http://localhost:3000/list.html">天天特卖</a></li><span class="iconfont icon-shuxian"></span>
                            <li><a href="http://localhost:3000/list.html">极有家</a></li><span class="iconfont icon-shuxian"></span>
                            <li><a href="http://localhost:3000/list.html">淘宝直播</a></li>
                        </ul>
                    </div>
                    <div class="down">
                        <div class="banner"></div>
                        <div class="usermsg">
                            <div class="avator">
                                <a href="http://localhost:3000/function.html" class="center"><img src="https://img0.baidu.com/it/u=3499388948,3360702914&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=450"
                                    alt=""></a>
                            </div>
                            <div class="hi">Hi!你好</div>
                            <div class="function">
                                <a href="http://localhost:3000/login.html" class="login">登录</a>
                                <a href="http://localhost:3000/rejester.html" class="register">注册</a>
                                <a href="" class="Entrepreneurship">开店</a>
                            </div>
                            <div class="links">
                                <a href="http://localhost:3000/cart.html">
                                    <ul class="iconfont icon-shoucang">
                                        <li>宝贝收藏</li>
                                    </ul>
                                </a>
                                <a href="http://localhost:3000/cart.html">
                                    <ul class="iconfont icon-shangpin">
                                        <li>买过的店</li>
                                    </ul>
                                </a>
                                <a href="http://localhost:3000/cart.html">
                                    <ul class="iconfont icon-dianpu">
                                        <li>收藏的店</li>
                                    </ul>
                                </a>
                                <a href="http://localhost:3000/cart.html">
                                    <ul class="iconfont icon-lishijilu_huaban">
                                        <li>我的足迹</li>
                                    </ul>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="special">
                    <div class="tab">
                        <ul>
                            <li>生活数码</li>
                            <li>服饰鞋包</li>
                            <li>食品保健</li>
                            <li>美妆个护</li>
                        </ul>
                        <div class="conts">
                            <div class="selected">
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/201705/19/194904q7hz7s002sslhuw7.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/201712/05/053656yytb3bzvl3pt8zvb.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/201712/05/053702swgnke45owgzjgnk.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/201801/05/055130drxv8llwmf3v8nrr.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/201801/05/055133pff1dah1oaspisdk.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/201905/23/091810e1ajiz921deisid1.jpg.thumb.jpg" alt=""></a>
                            </div>
                            <div class="food">                                            
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202112/28/222555axedjf4kszwrdd48.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/201710/15/162444a88xhid8dkf9dfib.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202209/29/203640ipyqzqj4tp2r21si.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202209/29/203654gsobcxvqq1e31zjc.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202209/29/204255xc5ph5jjjpn59569.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202209/28/224749txdzhzzxkt1xkhqp.jpg.thumb.jpg" alt=""></a>
                            </div>
                            <div class="goods">
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202210/07/193215asnzv5zrv6qzrjru.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202210/07/193339eqwwqmwqw81hewmj.png.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202210/07/193352t0rob0bourlrflzg.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202209/26/083947zj62k7binc6b676t.png.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202209/26/084027qdbb0dwrbtxlcy9y.png.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202209/26/084047bm5um5cxbq9qo57m.png.thumb.jpg" alt=""></a>
                            </div>
                            <div class="self">
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202003/26/151341p65v25dc1a6x5a6m.jpg.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202208/07/114114yswrph0vkbss9dws.png.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202208/07/114122c3v7d7unzu7ddj9n.png.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202208/07/114126s4n8141yzv4zb4p3.png.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202208/07/114132gt3sxuhvvu9g4kaz.png.thumb.jpg" alt=""></a>
                                <a href="http://localhost:3000/list.html"><img src="https://img.doooor.com/img/forum/202101/17/223546chjz6wxoukxhkuok.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="scroll">
                    <div class="discover">
                        <a href="http://localhost:3000/list.html"><span class="iconfont icon-youjiantou">探索新生活</span></a>
                    </div>
                    <div class="move">
                        <div class="imgbox1"></div>
                        <div class="imgbox2"></div>
                    </div>
                </div>
            </div>
            <div class="recommand">
            </div>
            <footer>
                <a href="" class="iconfont icon-shuxian">阿里巴巴集团</a>
                <a href="" class="iconfont icon-shuxian">淘宝网</a>
                <a href="" class="iconfont icon-shuxian">天猫</a>
                <a href="" class="iconfont icon-shuxian">聚划算</a>
                <a href="" class="iconfont icon-shuxian">全球速卖通</a>
                <a href="" class="iconfont icon-shuxian">阿里巴巴国际交易市场</a>
                <a href="" class="iconfont icon-shuxian">1688</a>
                <a href="" class="iconfont icon-shuxian">阿里妈妈</a>
                <a href="" class="iconfont icon-shuxian">飞猪</a>
                <a href="" class="iconfont icon-shuxian">淘小铺</a>
                <a href="" class="iconfont icon-shuxian">阿里云计算</a>
                <a href="" class="iconfont icon-shuxian">AliOS</a>
                <a href="" class="iconfont icon-shuxian">阿里通信</a>
                <a href="" class="iconfont icon-shuxian">一淘</a>
                <a href="" class="iconfont icon-shuxian">万网</a>
                <a href="" class="iconfont icon-shuxian">高德</a>
                <a href="" class="iconfont icon-shuxian">UC</a>
                <a href="" class="iconfont icon-shuxian">友盟</a>
                <a href="" class="iconfont icon-shuxian">阿里安全虾米</a>
                <a href="" class="iconfont icon-shuxian">大麦网</a>
                <a href="" class="iconfont icon-shuxian">钉钉</a>
                <a href="" class="iconfont icon-shuxian">支付宝</a>
                <a href="" class="iconfont icon-shuxian">优酷</a>
                <a href="" class="iconfont icon-shuxian">土豆</a>
                <a href="" class="iconfont icon-shuxian">阿里健康</a>
                <a href="" class="iconfont icon-shuxian">阿里影业</a>
                <a href="" class="iconfont icon-shuxian">阿里体育</a>
                <a href="" class="iconfont icon-shuxian">网商银行</a>
                <div>
                    <span>浙网文（2019）1033-086号</span>
                    <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span>
                    <span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span>
                    <span>短消息类服务接入代码使用证书：号【2016】00154-A01</span>
                    <span>信息网络传播视听许可证：1109364号</span>
                    <span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
                    <span>浙公网安备 33010002000078号</span>
                    <span>广播电视节目制作经营许可证（浙）字第01012号</span>
                    <span>市场名称登记证：工商网市字3301004120号</span>
                    <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span>
                </div>
            </footer>
        </div>

        <div class="sidelist">
            <a href="">
                <ul class="iconfont icon-xiaoxi">
                    <li>消息</li>
                </ul>
            </a>
            <a href="">
                <ul class="iconfont icon-kefu">
                    <li>官方客服</li>
                </ul>
            </a>
            <a href="">
                <ul class="iconfont icon-yijianfankui">
                    <li>反馈</li>
                </ul>
            </a>
            <a href="">
                <ul class="iconfont icon-jubao">
                    <li>举报</li>
                </ul>
            </a>
            <ul class="iconfont icon-icon" id="backtotop">
                <li>回到顶点</li>
            </ul>
        </div>
    </div>
</body>

<script src="./js/banner.js"></script>
<script src="./js/move.js"></script>
<script src="./js/tab.js"></script>
<script src="./js/scroll.js"></script>
<script src="./js/listimg.js"></script>
<script src="./js/ajax.js"></script>
<script src="./jsonp.js"></script>

<script>

    let main = document.querySelector(".main")
    let left = document.querySelector(".left")
    let ul = document.querySelectorAll("ul")
    let li = document.querySelectorAll("li")
    const box = document.querySelector(".nav .right .down .banner")
    let backtotop = document.querySelector(".sidelist #backtotop")
    let recommandbox = document.querySelector(".recommand")
    let fun = document.querySelector(".function")
    let hi = document.querySelector(".hi")
    let otxt = document.querySelector(".txt")
    let osearchlist = document.querySelector(".searchlist")
    let oa = document.querySelectorAll(".conts div a")
    let center = document.querySelector(".center")
    console.log(center)

    otxt.oninput = function(){
        jsonp("https://suggest.taobao.com/sug", {
            k:1,
            area:"c2c",
            q:this.value,
            code:"utf-8",
            ts:"1663317399744",
            callback:"ahsjdgvsugeubirtfl",
            cbNameFieldName:"callback"
        }, res=>{
            let str = "";
            res.result.forEach(val=>{
                str += `<li> <a href="http://localhost:3000/list.html">   ${val[0]} </a></li>`
            })
            osearchlist.innerHTML = str;
        })
    }

    if(location.search){
        fun.style.display = "none"
        hi.innerHTML = `${location.search.slice(1)},欢迎登录`
        center.href = `http://localhost:3000/function.html?${location.search.slice(1)}`
    }else{
        fun.style.display = "block"
    }

    document.onscroll = function () {
        const scrollT = document.documentElement.scrollTop;
        if (scrollT > 500) {
            backtotop.style.display = "block";
        } else {
            backtotop.style.display = "none";
        }
    }
    let time
    backtotop.onclick = function () {
        let p = document.documentElement.scrollTop;
        clearInterval(time);
        time = setInterval(() => {
            let speed = (document.documentElement.scrollTop) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (p !== document.documentElement.scrollTop) {
                clearInterval(time)
            }
            document.documentElement.scrollTop -= speed;
            p = document.documentElement.scrollTop;
            if (document.documentElement.scrollTop === 0) {
                clearInterval(time)
            }
        }, 10);
    }
    const w = main.offsetWidth;
    const l = left.offsetWidth;
    const w1 = w - l;
    window.onresize = function () {
        if (document.documentElement.clientWidth < 1090) {
            left.style.display = "none";
            for (let m = 0; m < recommandbox.children.length; m++) {
                recommandbox.children[m].style.width = "48%";
                
            }
            for(let t = 0;t<oa.length;t++){
                    oa[t].style.height = "200px"
                }
            move(main, { width: w1 })
        } else if (document.documentElement.clientWidth > 1090) {
            move(main, { width: w })
            left.style.display = "inline-block"
            for (let m = 0; m < recommandbox.children.length; m++) {
                recommandbox.children[m].style.width = "30%";
            }
            for(let t = 0;t<oa.length;t++){
                    oa[t].style.height = "250px"
                }
        }
    }

    let scrollbox = document.querySelector(".scroll .move");
    let imgbox1 = document.querySelector(".scroll .move .imgbox1");
    let imgbox2 = document.querySelector(".scroll .move .imgbox2");

    new Banner({ box })

    new scroll({
        scrollbox,
        imgbox1,
        imgbox2,
    })
    new listimg({recommandbox})
</script>

</html>